<template>
  <div class="user-avator-dropdown">
    <Dropdown @on-click="handleClick" placement="bottom-start">
      <!--<Avatar :src="userAvator"/>-->
      <Icon type="md-person" size="25"/>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="user">个人信息</DropdownItem>
        <DropdownItem name="edit">修改密码</DropdownItem>
        <DropdownItem name="logout" divided>退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <modal :mask-closable="false"
        v-model="modal"
        width="400"
        title="修改密码"
        footer-hide="true"
        >
        <Form :model="formInline" :label-width="80" ref="editPWForm" :rules="ruleInline">
          <FormItem label="原密码" prop="oldpw" >
            <Input v-model="formInline.oldpw" placeholder="请输入原密码" type="password"></Input> 
          </FormItem>
          <FormItem label="新密码" prop="newpw">
            <Input v-model="formInline.newpw" placeholder="请输入新密码" type="password"></Input>    
          </FormItem>
          <FormItem label="确认密码" prop="confirmpw">
            <Input v-model="formInline.confirmpw" placeholder="请确认新密码" type="password"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit()">确认</Button>
            <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
          </FormItem>
        </Form>
    </modal>
    <modal 
        v-model="userModal"
        width="400"
        title="个人信息"
        footer-hide="true"
        >
      <p>用户名：{{userName}}</p>
      <p>工号：{{jobNum}}</p>
    </modal>
  </div>
</template>

<script>
import "./user.less";
import ValidatorRule from "@/filters/validator-rule";
import { mapActions } from "vuex";
export default {
  name: "User",
  props: {
    userAvator: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      modal: false,
      userModal: false,
      userName: "",
      jobNum: "",
      formInline: {
        oldpw: "",
        newpw: "",
        confirmpw: ""
      },
      ruleInline: {
        oldpw: ValidatorRule.password,
        newpw: ValidatorRule.password,
        confirmpw: ValidatorRule.password
      }
    };
  },

  mounted() {
    let user = this.$store.state.user.userInfo;
    this.userName = user.userName;
    this.jobNum = user.userId;
  },

  methods: {
    ...mapActions(["handleLogOut", "editUserPw"]),
    handleClick(name) {
      switch (name) {
        case "edit":
          this.modal = true;
          break;
        case "user":
          this.userModal = true;
          break;
        case "logout":
          this.handleLogout();
          break;
      }
    },

    handleReset() {
      this.$refs.editPWForm.resetFields();
    },

    handleLogout() {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    },

    handleSubmit() {
      this.$refs.editPWForm.validate(valid => {
        if (valid) {
          if (this.formInline.newpw !== this.formInline.confirmpw) {
            this.$Message.error("密码与确认密码输入不一致！");
            return;
          }
          this.editUserPw(this.formInline).then(res => {
            if (res) {
              this.$Message.success("修改成功,稍后将退出,请重新登录！");
              setTimeout(() => {
                this.modal = false;
                this.handleLogOut().then(() => {
                  this.$router.push({
                    name: "login"
                  });
                });
              }, 3000);
            }
          });
        }
      });
    }
  }
};
</script>
